<template>
  <div>
    <a-tag
      v-for="tag in state.tags"
      :key="tag.id"
      class="mx-1"
      :closable="tag.id !== 1"
      :disable-transitions="false"
      @close="handleClose(tag)"
      @click="changeMenu(tag)"
      :color="tag.route == route.path ? '#1677ff' : ''"
    >
      {{ tag.label }}
    </a-tag>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, computed } from "vue";
import { index } from "../stores/index";
import router from "@/router";
import { useRoute } from "vue-router";

const route = useRoute();
const changeMenu = (tag: any) => {
  index().changeMenu(tag);
  router.push(tag.route);
};
const state = reactive({
  tags: computed(() => index().tagsList),
});

// @ts-ignore
const handleClose = (tag) => {
  index().closeTab(tag);
  if (tag.id === route.name) {
    index().changeMenu(state.tags[0]);
    router.push("/home");
  }
};
</script>

<style scoped>
:deep(.ant-tag){
  cursor: pointer;
  margin: 10px 0 0 10px;
}
</style>
